
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		<title>File Index | JUL API Reference</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="mobileoptimized" content="0" />
	
		<link rel="stylesheet" href="css/all.css" media="all" />
		<link rel="stylesheet" href="css/handheld.css" media="only screen and (max-width: 660px)" />
		<link rel="stylesheet" href="css/handheld.css" media="handheld" />
		<link rel="stylesheet" href="css/screen.css" media="screen and (min-width: 661px)" />

		<script src="javascript/all.js"></script>
		<!--[if lt IE 9]>
			<script src="javascript/html5.js"></script>
		<![endif]-->
	</head>

	<body>

<div class="index">
	<div class="menu">
		<div class="indexLinks">
			<a href="allclasses.html">Classes</a>
			<a href="index.html">Files</a>
		</div>
	
		<h2 class="heading1">Classes</h2>
		
		<input type="text" name="classFilter" class="classFilter" id="ClassFilter" placeholder="Filter"></input>
		
		<nav>
			<ul class="classList" id="ClassList">
				
					<li><a href="symbols/JUL.html">JUL</a></li>
				
					<li><a href="symbols/JUL.Ref.html">JUL<span class='break'> </span>.<span class='break'> </span>Ref</a></li>
				
					<li><a href="symbols/JUL.UI.html">JUL<span class='break'> </span>.<span class='break'> </span>UI</a></li>
				
					<li><a href="symbols/JUL.UI.Parser.html">JUL<span class='break'> </span>.<span class='break'> </span>UI<span class='break'> </span>.<span class='break'> </span>Parser</a></li>
				
			</ul>
		</nav>
	</div>
	<div class="fineprint" style="clear:both">
		<footer>
			Copyright &copy; 2012 - 2014 <a href="https://jul-javascript.googlecode.com/" target="blank"">The Zonebuilder</a><br />
			Documentation generator: <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.4.0<br />
			Template: <a href="http://www.thebrightlines.com/2010/05/06/new-template-for-jsdoctoolkit-codeview/" target="_blank">Codeview</a> 1.2
		</footer>
	</div>
</div>

<div class="index indexStatic"></div>

<div class="content">
	<div class="innerContent">
		<article>
			<h1 class="classTitle"><span>File Index</span></h1>
			
			<ul class="fileList" id="FileList">
				
					<li>
						<h2 class="filename"><a href="symbols/src/jul.js.html">jul.js</a></h2>
						
						
The JavaScript UI Language (JUL) is a configuration and instantiation module for the JavaScript frameworks. 
It can be used with any framework that accepts a configuration object as a constructor parameter, 
or with a custom factory for the other frameworks.<br />
JUL parses a tree of configuration objects, and creates the runtime components in the expected order and membership. 
For the most uses, after this step, you will have your application's user interface up and running.<br>
<br>An example of the JUL tree for a generic 'FWK.Widgets' component library:
<pre><code>var oUiConfig = {
    xclass: 'FWK.Widgets.DataView',
    id: 'APP.mainView',
    autoDraw: false,
    overflow: 'hidden',
    children: [{
        xclass: 'FWK.Widgets.VLayout',
        id:'VLayout0',
        children: [{
            xclass: 'FWK.Widgets.ToolStrip',
            id: 'ToolStrip0',
            visibilityMode: 'multiple'
        }, {
            xclass: 'FWK.Widgets.HLayout',
            id: 'HLayout0',
            children: [{
                xclass: 'FWK.Widgets.VLayout',
                id: 'Navigation',
                width: 200,
                showResizeBar: true
                }, {
                xclass: 'FWK.Widgets.TabSet',
                   id: 'TabSet1',
                tabs: [{
                    xclass: 'FWK.Widgets.Tab',
                    title: 'Tab1',
                    id: 'Tab1'
                }, {
                    xclass: 'FWK.Widgets.Tab',
                    title: 'Tab2',
                    id: 'Tab2'
                }],
                showTabScroller:true,
                showTabPicker:true,
                destroyPanes:false,
                showEdges:false
            }]
        }]
    }],
    width: '100%',
    height: '100%'
};
var oParser = new JUL.UI.Parser({
    classProperty: 'xclass',
    childrenProperty: 'children',
    membersProperties: ['tabs'],
    idProperty: 'id'
});
oParser.create(oUiConfig);
APP.mainView.render();</code></pre>
<br>Another example of the JUL tree for a XUL dialog:
<pre><code>var oUiConfig = {
    tag: 'dialog',
    id: 'dialog-browse',
    title: 'Open',
    width: 500,
    height: 250,
    hidden: true,
    children: [
        {tag: 'listbox', id: 'listbox-browse', selType: 'single', 
            flex: 1, children: [
            {tag: 'listhead', children: [
                {tag: 'listheader', label: 'Name', width: 300}
        ]},
            {tag: 'listbody', children: [
                {tag: 'listitem', children: [
                    {tag: 'listcell', label: 'File 1'}
                ]},
                {tag: 'listitem', children: [
                    {tag: 'listcell', label: 'File 2'}
                ]}
            ]}
        ]}
    ],
};
var oParser = new JUL.UI.Parser({
    defaultClass: 'xul',
    useTags: true,
    tagProperty: 'tag',
    customFactory: 'JUL.UI.createDom',
    topDown: true
});
var oDialog = oParser.create(oUiConfig);
oDialog.show();</code></pre><br>
						
						<dl class="detailList">
							
								<dt class="heading">Author:</dt>
								<dd><a href="mailto:zone.builder@live.com">The Zonebuilder</a></dd>
							
							
							
								<dt class="heading">Version:</dt>
								<dd>1.0.5</dd>
							
							
							
							
						</dl>
					</li>
				
			</ul>
		</article>
	</div>
</div>
		<script type="text/javascript">
			wbos.CssTools.MediaQueryFallBack.LoadCss('css/screen.css', 'css/handheld.css', 660)
			codeview.classFilter.Init()
		</script>
	</body>
</html>
